<!--
 -- 签到签退 查看人员轨迹
-->
<template>
    <div class="ResearchersTrack">
        <el-row :gutter="20">
            <el-col :span="16">
                <div v-show="researchersTrackData.length !==0?true:false" id="allmap" class="allmap" ref="allmap"></div>
                <div v-show="researchersTrackData.length ===0?true:false" class="no_allmap">当前时间段内暂无人员轨迹</div>
            </el-col>
            <el-col :span="8">
                <div style="width:100%">
                    <el-form>
                        <el-form-item label="查询日期：">
                            <!-- <el-date-picker
                                v-model="formInline_temp.time"
                                type="datetimerange"
                                align="right"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                :picker-options="util.intTimePickerOptions()"
                                >
                            </el-date-picker> -->
                            <el-date-picker
                                v-model="formInline_temp.time"
                                type="time"
                                format="yyyy-MM-dd"
                                placeholder="选择时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="查询人员： ">
                            <el-select filterable v-model="formInline_temp.signUser" placeholder="请选择查询人员">
                                <el-option :label="$store.state.userinfo.name" value=""></el-option>
                                <el-option
                                v-for="item in personnelOptions"
                                :key="item.accountName"
                                :label="item.name"
                                :value="item.accountName">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="btn_cliss">
                            <el-button class="form-search-btn" style="width:372px" type="primary" @click="getData()">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { getSignRecordGroupList } from '@/api/signIn'
import {getHaveOrgUserList} from '@/api/user'
import util from '@/utils/util'
import BMap from 'BMap'
export default {
    props:{
        formInline:{}
    },
    data(){
        return{
            researchersTrackData: [],
            personnelOptions: [], // 值班人员下拉框数据
            util:util,
            formInline_temp: {
                orgIds:'',
                time:this.formatDate(new Date()),
                signUser:'',
                currentPageSize: 10,
                currentPageIndex: 1,
                currentPageTotal: 0,
                type: ''
            }
        }
    },
    created(){
        // if (this.formInline.signUser !== '') {
        //     this.formInline_temp.orgIds =  this.formInline.orgIds
        //     this.formInline_temp.currentPageSize =  this.formInline.currentPageSize
        // } else {
        //     this.formInline_temp.orgIds =  this.formInline.orgIds
        // }
        this.getUsers()
    },
    mounted(){
        // this.initMap()
    },
    methods:{
        initMap(researchersTrackData) {
            if (researchersTrackData.length ===0) {
                return
            }
            let self = this
            // 百度地图API功能
            let map = new BMap.Map("allmap", {enableMapClick:false,enableMap:false});
            // 默认地图中心点为第一个单位
            let start_point_signInUserLng = researchersTrackData.length!==0?researchersTrackData[0].signOrgLongitude: self.longitude
            let start_point_signInUserLat = researchersTrackData.length!==0?researchersTrackData[0].signOrgLatitude: self.latitude
            let point = new BMap.Point(start_point_signInUserLng,start_point_signInUserLat);//定义一个中心点坐标
            map.centerAndZoom(point,16);//设定地图的中心点和坐标并将地图显示在地图容器中
            map.enableScrollWheelZoom(true);

            // 数据格式转换
            researchersTrackData = self.toTree(researchersTrackData)
            //循环单位和气泡 在地图上显示
            for(let i=0;i<researchersTrackData.length;i++){
                // 循环所有单位的经纬度
                let point_signInUserLng = researchersTrackData.length!==0?researchersTrackData[i].signOrgLongitude: self.longitude
                let point_signInUserLat = researchersTrackData.length!==0?researchersTrackData[i].signOrgLatitude: self.latitude
                let everywill_track = new BMap.Point(point_signInUserLng,point_signInUserLat);
                let start_m = new BMap.Marker(everywill_track); 
                // 单位图标（目前隐藏，不需要）
                let option_map = {imageOffset: new BMap.Size(0, 0),offset: new BMap.Size(0, 0),}
                start_m.setIcon(new BMap.Icon('resource/rdspFile_1552981560146.png',new BMap.Size(0, 0),option_map));
                map.addOverlay(start_m);
                // 多单位气泡位置和内容
                let strart_trackmarkerLabelScore = ""
                let strart_markerLabelScoreList = ""
                let start_signInDate = ""
                let start_signOutDate = ""
                let start_point_Arr = {}
                let signIn_signOut_height = 64
                signIn_signOut_height = signIn_signOut_height + researchersTrackData[i].children.length*16
                for(let j=0;j<researchersTrackData[i].children.length;j++){
                    start_point_Arr = researchersTrackData[i].children?researchersTrackData[i].children[j]: {}
                    // 起始 签到签退时间
                    start_signInDate = start_point_Arr.signInDate === undefined||start_point_Arr.signInDate === null?'':'签到'+start_point_Arr.signInDate.substr(11,5)
                    start_signOutDate = start_point_Arr.signOutDate === undefined||start_point_Arr.signOutDate === null?'': ' - 签退'+start_point_Arr.signOutDate.substr(11,5)
                    strart_markerLabelScoreList+="<p style='color: rgba(0, 0, 0, 0.8);font-weight: normal;font-size: 14px;'>"+ (start_signInDate + start_signOutDate ) +"</p>"
                }
                strart_trackmarkerLabelScore = new BMap.Label(`<div id='pageContainer_start' class='ResearchersTrack_researchersTrac_pop'> <div class='ResearchersTrack_baiduMark-duty'>
                        <div>
                            <p class="ResearchersTrack_channel-del" style='font-size:16px;padding-bottom: 9px;font-weight: blod;color:#000;'>`+(researchersTrackData[i].signOrgName || '')+`</p>
                            <div> 
                            </div>
                            `+strart_markerLabelScoreList+`
                        </div>
                    </div></div>`,{
                    offset:new BMap.Size(-107, -signIn_signOut_height),
                    position: everywill_track
                });  
                strart_trackmarkerLabelScore.setStyle({
                    width: '215px',
                    height:'96px',
                    color: '#fff',
                    fontSize: '16px',
                    backgroundColor: 'none',
                    border: 'none',
                    borderRadius:"4px",
                    textAlign: "center",
                    padding: "5px 5px",
                    lineHeight: "15px"
                });
                // strart_trackmarkerLabelScore.setStyle({
                //     width: '180px',
                //     /* height:40px, */
                //     opacity: '0.8',
                //     padding: '0px 0px 0px 0px',
                //     display: 'flex',
                //     alignItems: 'center',
                //     textAlign: 'center',
                //     border: 'none',
                //     justifyContent: 'center',
                //     backgroundColor: '#F9B80E',
                //     borderRadius: '4px',
                //     padding: '10px 0px',
                //     position: 'relative',
                // });
                map.addOverlay(strart_trackmarkerLabelScore); 
            }
            // 路线规划
            if (researchersTrackData.length > 1 ) {
                let strart_driving // 路线规划 起始点
                let end_driving; // 路线规划 终点
                let center_driving = [] // 路线规划 途径点
                // 路线规划 起始点
                let strart_driving_signInUserLng = researchersTrackData.length!==0?researchersTrackData[0].signOrgLongitude: self.longitude
                let strart_driving_signInUserLat = researchersTrackData.length!==0?researchersTrackData[0].signOrgLatitude: self.latitude
                strart_driving = new BMap.Point(strart_driving_signInUserLng,strart_driving_signInUserLat);
                // 路线规划 终点
                if (researchersTrackData.length >= 1 ) {
                    let end_driving_signInUserLng = researchersTrackData.length!==0?researchersTrackData[researchersTrackData.length-1].signOrgLongitude: self.longitude
                    let end_driving_signInUserLat = researchersTrackData.length!==0?researchersTrackData[researchersTrackData.length-1].signOrgLatitude: self.latitude
                    end_driving = new BMap.Point(end_driving_signInUserLng,end_driving_signInUserLat);
                }
                // 路线规划 途径点
                if(researchersTrackData.length>=2){
                    for(let i = 1; i<researchersTrackData.length-1;i++){
                        let center_driving_signInUserLng = researchersTrackData.length!==0?researchersTrackData[i].signOrgLongitude: self.longitude
                        let center_driving_signInUserLat = researchersTrackData.length!==0?researchersTrackData[i].signOrgLatitude: self.latitude
                        center_driving.push(new BMap.Point(center_driving_signInUserLng,center_driving_signInUserLat));
                    }
                }
                //行车路线规划 实例
                let driving = new BMap.DrivingRoute(map, { renderOptions:{ map: map, autoViewport: true},
                    onPolylinesSet:function(Route){
                        //当线条添加完成时调用
                        for(let i=0;i<Route.length;i++){
                                let polyline = Route[i].getPolyline();//获取线条遮挡物
                                    // polyline.setStrokeColor("#000");//设置颜色
                                    polyline.setStrokeWeight(5);//设置宽度
                                    polyline.setStrokeOpacity(1);//设置透明度
                        }
                    },onMarkersSet:function(routes) {
                        //当地图标记添加完成时调用
                        for (let i = 0; i <routes.length; i++) {
                            map.removeOverlay(routes[i].marker); //删除起始终点默认图标
                            map.removeOverlay(routes[i].Um); //删除途经默认图标
                        }
                    }
                });
                driving.enableAutoViewport(); // 自动调整层级
                driving.search(strart_driving, end_driving,{waypoints:center_driving});//waypoints表示途经点 
            }
        },
        toTree: function(tarArray){
            let self = this
            let newArr = self.deRepeat(tarArray)
            for(let i=0;i<newArr.length;i++){
                newArr[i].children = []
                for(let n=0;n<tarArray.length;n++){
                    if(newArr[i].signOrg == tarArray[n].signOrg){
                        newArr[i].children.push(tarArray[n])
                    }
                }
            }
            return newArr
        },
        deRepeat: function(arr){
            let newArr = []
            let obj = {};
            arr = arr.reduce((item, next) => {
            if (!obj[next.signOrg]) {
                item.push(next);
                obj[next.signOrg] = true;
            }
            return item;
            }, []);
            return arr
        },
        getData() {
            // if (this.formInline_temp.signUser === '') {
            //     this.formInline_temp.signUser = this.$store.state.userinfo.accountName 
            // }
            let that = this
            this.researchersTrackData = []
            getSignRecordGroupList({
                signOrgIds: this.formInline_temp.orgIds || this.$store.state.userinfo.organizationIds,
                queryType:1,
                pageIndex: this.formInline_temp.currentPageIndex -1,
                pageSize: this.formInline_temp.currentPageSize,
                startTime:this.formInline_temp.time?this.formatDate(this.formInline_temp.time)+"00:00:00":this.formatDate(new Date())+"00:00:00",
                endTime: this.formInline_temp.time?this.formatDate(this.formInline_temp.time)+"23:59:59":this.formatDate(new Date())+"23:59:59",
                signUser: this.formInline_temp.signUser ? this.formInline_temp.signUser : this.$store.state.userinfo.accountName,
                type: this.formInline_temp.type,
            }).then((type) => {
                this.researchersTrackData = type.data;
                that.$nextTick(() => {
                    that.initMap(type.data)
                })  
                
            }) 
        },
        formatDate(date) { 
            var date = new Date(date)
            var year = date.getFullYear(); 
            var month = date.getMonth() + 1; 
            var day = date.getDate(); 
            var hour = date.getHours(); 
            var minute = date.getMinutes(); 
            return year + "-" + this.formatTen(month) + "-" + this.formatTen(day)+ " "
        },
        formatTen(num) { 
            return num > 9 ? (num + "") : ("0" + num); 
        },
        getUsers(){
            getHaveOrgUserList({
                orgIds:this.formInline_temp.orgIds || this.$store.state.userinfo.organizationIds,
            }).then(res => {
                this.personnelOptions = res.data
                this.getData()
            })
        },
    }
}
</script>
<style>
.ResearchersTrack_researchersTrac_pop {
    width: 180px;
    /* height:40px; */
    opacity: 0.8;
    padding: 0px 0px 0px 0px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    background-color: #F9B80E;
    border-radius: 4px;
    padding: 10px 0px;
    position: relative;
}
.ResearchersTrack_researchersTrac_pop:after{
    content: '';
    width: 0;
    height: 0;
    border: 10px solid;
    position: absolute;
    bottom: 0;
    transform: translateY(20px);
    border-color:  #F9B80E transparent transparent;
}
.ResearchersTrack_baiduMark-duty {
    color: #000;
    font-size: 15px;
    font-weight: bold;
}
.ResearchersTrack_channel-del{
    font-weight: bold !important;
    width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>
<style lang="scss" scoped>
.ResearchersTrack{
    padding-bottom: 20px;
    .el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner {
        width: 100%;
    }
    .btn_cliss {
        display: flex;
        justify-content: flex-end;
    }
    
}
.allmap{
    height: 700px;
    width: 100%;
}
.label_image {
    display: flex;
}
.no_allmap {
    height: 700px;
    width: 100%;
    background-color: #efefef;
    color:#000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}
</style>